<template>
    <div>
        <page-main>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row>
                <el-table-column prop="name" label="账户名称">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row)">{{ scope.row.name }}</el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="id" label="账户ID" /> -->
                <el-table-column prop="is_feed" label="推广类型">
                    <template #default="scope">
                        <span>{{ scope.row.is_feed == '1' ? '信息流推广' : '搜索推广' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="token" label="Token">
                    <template #default="scope">
                        <el-popover
                            placement="bottom-center"
                            trigger="hover"
                        >   
                            <span>{{ scope.row.token }}</span>
                            <template #reference>
                                <div class="tag-box">
                                    <span class="token-text">{{ scope.row.token }}</span>
                                </div>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
    </div>
</template>

<script>
import { baiduAccount } from '@/api/advertisement'
export default {
    name: 'ClueMine',
    filters: {
        acceptFilter(val) {
            const map = {
                0: '不接收',
                1: '接收线索'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                0: '禁用',
                1: '启用'
            }
            return map[val]
        },
        authFilter(val) {
            const map = {
                1: '总管理员',
                2: '管理员',
                3: '员工'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                dept_id: '',
                pages: 1,
                limit: 10,
                total: 0
            },
            departOptions: [],
            dataList: []
        }
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            baiduAccount(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        },
        getOptions() {
            // departList().then(res => {
            //     if (res.status == '1') {
            //         this.departOptions = res.data.list || []
            //     }
            // })
        },
        detail(row) {
            console.log(row);
            this.$router.push(`/baidu/invest?id=${row.id}&is_feed=${row.is_feed}`)
        },
        deptChange(e) {
            this.search.dept_id = e.length ? e[e.length - 1] : ''
        }
    }
}
</script>
<style lang="scss" scoped>
.token-text {
    display: inline-block;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
